<style lang="scss" scoped>
	@import "../../style/them";

	page {
		background: #fff;
	}

	.title {
		height: 80rpx;
		width: 100%;
		text-align: center;
		line-height: 80rpx;
		font-style: 36rpx;
		border-bottom: 1rpx solid #ddd8d8;
	}

	.list {
		// height: 136rpx;
		width: calc(100% - 80rpx);
		margin-left: 40rpx;
		display: flex;
		justify-content: space-between;
		padding: 22rpx 20rpx;
		border-bottom: 1rpx solid #ddd8d8;

		&-desc {
			&>view {
				&:nth-child(1) {
					font-size: 32rpx;
					color: #101010;
				}

				&:nth-child(2) {
					font-size: 28rpx;
					color: #101010;
					margin-top: 8rpx;
				}
				&:nth-child(3) {
					font-size: 28rpx;
					color: #101010;
					margin-top: 8rpx;
				}
				&:nth-child(4) {
					font-size: 28rpx;
					color: #101010;
					margin-top: 8rpx;
				}
				&:nth-child(5) {
					font-size: 28rpx;
					color: #101010;
					margin-top: 8rpx;
					width: calc(100% - 70rpx);
					word-break: break-all;
				}
			}
		}

		&-status {
			margin: auto;
			&>view {
				box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.4);
				width: 150rpx;
				height: 84rpx;
				border-radius: 10rpx;

				&:nth-child(1) {
					background: #ff7f0a 87%;
					color: #fff;
					text-align: center;
					line-height: 84rpx;
				}

				&:nth-child(2) {
					background: #55ff00 87%;
					color: #fff;
					text-align: center;
					line-height: 84rpx;
				}

				&:nth-child(3) {
					background: #ff0000 87%;
					color: #fff;
					text-align: center;
					line-height: 84rpx;
				}

				// &:nth-child(3) {
				//   background: #f71818 100%;
				//   color: #fff;
				//   font-size: 26rpx;
				//   text-align: center;
				//   display: flex;
				//   justify-content: center;
				//   align-items: center;
				// }
			}
		}
	}
</style>

<template>
	<view class="container">
		
		<view class="title ">兑换明细</view>
		<u-empty v-show="msgShow" text="暂无充值记录" mode="list"></u-empty>
		<view class="list" v-for="item in list" :key="item.orderId">
			<view class="list-desc">
				<view>{{item.info}}</view>
				<view>手机号：{{item.cardTel}}</view>
				<view>加油卡号：{{item.cardNumber}}</view>
				<view>使用时间：{{item.carteTime}}</view>
				<view >
					<view>卡密：{{item.scret}}</view>
				</view>
			</view>
			<view class="list-status">
				<view @click="home" v-show="item.status == 0">充值中</view>
				<view @click="home" v-show="item.status == 1">充值成功</view>
				<view @click="home" v-show="item.status == 4">充值失败</view>

				<!-- <view @click="home" v-show="item.status == 1">
          <view >
            <view>兑换失败</view>
            <view> 重新操作 </view>
          </view> -->
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	//导入请求封装类

	export default {
		data() {
			return {
				list: [],
				tel: "",
				msgShow:false
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数 
			if (option.tel !== undefined) {
				this.tel = option.tel;
			} else {
				uni.navigateTo({
					url: "../dotel/index",
				});
			}
		},
		methods: {
			initOrder() {
				this.httpClient
					.get({
						url: this.APIPath.orderList.index + "?tel=" + this.tel
					})
					.then((res) => {
						if(res.data.records.length===0){
							this.msgShow = true;
						}else{
							this.list = res.data.records;
						}
						
						
					});
			},
			home() {
				uni.navigateTo({
					url: "../index/index",
				});
			},

			/**
			 * 从缓存中获取openId
			 */
		},
		created() {
			this.initOrder();




		},
	};
</script>
